<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script>
        /*
        DOM：文档对象模型
        文档：整个html网页文档
        对象：表示将网页中的每一个部分都转换为一个对象
        模型：使用模型来表示对象之间的关系，这样方便我们获取对象
        节点：
        Node 是构成HTML文档的最基本的单元，网页中的每一个部分都可以成为一个节点
        文档节点：整个html文档
        元素节点：html文档中的标签
        属性节点：元素的属性
        文本节点:标签中的文本内容
                  nodeName         nodeType    nodeValue
       文档节点    #document            9           null
       元素节点     标签名               1           null
       属性节点     属性名               2          属性值
       文本节点     #text               3         文本内容
         */
  /*
        事件：
        文档或浏览器窗口中发生的一些特定的交互瞬间
        jS和Html之间的交互是通过事件实现的
  */
        /*
                          事件的绑定
         addEventListener()
         -参数
            1.事件的字符串，不要on
            2.需要绑定的函数（回调函数）
            3.是否捕获阶段触发事件，需要一个布尔值，一般都穿false
         使用addEventListener()可以同时为一个元素的 相同事件 绑定多个响应函数
         这样，当事件被触发时，响应函数将会按顺序执行

         attachEvent()
         兼容IE8
         参数：
             1."on"+事件的字符串
             2.需要绑定的函数（回调函数）
         */
        /*
        定义一个函数，用来为指定元素绑定响应函数
          参数：
          obj 要绑定的对象
          eventStr 事件的字符串
          callback 回调函数
       eg：
         function bind(obj,eventStr,callback){
           if(obj.addEventListener){
            obj.addEventListener(eventStr,callback,false);
            }
            else{
             obj.attachEvent("on"+eventStr,callback);
            }
         }
         */
    </script>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script>
    /*
    浏览器已经为我们提供了文档节点对象，文档节点是window属性
    document 可以直接使用，代表整个网页
     */
    //获取到button
    var btn=document.getElementById("btn");
    //修改按钮的文字
    /*
            innerHTML:
        获取对象的内容  或  向对象插入内容
     */
    btn.innerHTML="i'm Button";
    /*
    onclick
    当对象被点击时触发的事件
    可以为按钮的对应事件绑定处理函数的形式来响应事件
     */
    btn.onclick=function(){
        alert("干嘛");
        /*
        onscroll
        滚动条事件
         */

    };
</script>
</body>
</html>